<template>
  <div class="product">
    <div v-for="item in list" :key="item.shopId" class="order">
      <!-- top -->
      <van-cell :value="item.stateInfo">
        <template #title>
          <span class="titletxt">西贝杂货铺</span>
          <van-icon name="arrow" color="#666" />
        </template>
      </van-cell>

      <!-- 商品 -->
      <van-swipe-cell
        :before-close="beforeClose"
        v-for="product in item.data"
        :key="product.id"
      >
        <van-card
          class="goods-card"
          :num="product.num"
          :price="product.price"
          :desc="product.shop"
          :title="product.shop"
          :thumb="product.picture"
        >
          <template #tags>
            <van-tag plain type="danger">标签</van-tag>
            <van-tag plain type="danger">标签</van-tag>
          </template>
        </van-card>
        <!-- 删除 -->
        <template #right>
          <van-button square text="删除" type="danger" class="delete-button" />
        </template>
      </van-swipe-cell>

      <div class="txt">
        <span>
          共 <i>{{ item.data.length }}</i> 件商品
        </span>
        <span>
          小计：<i
            >￥{{
              item.data.reduce(
                (s, current) => s + current.price * current.num,
                0
              )
            }}</i
          >
        </span>
      </div>

      <!-- 待付款 -->
      <div class="btn" v-show="item.state === 0">
        <button @click="onCancel(item.shopId)">取消订单</button>
        <button class="topay">付款</button>
      </div>
      <!-- 待发货 -->
      <div class="btn" v-show="item.state === 1">
        <button @click="onTip">提醒发货</button>
      </div>
      <!-- 待收货 -->
      <div class="btn" v-show="item.state === 2">
        <button @click="onToast">查看物流</button>
      </div>
      <!-- 待评价 -->
      <div class="btn" v-show="item.state === 3">
        <button @click="$router.push('/sendanswer')">立即评价</button>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast, Dialog } from 'vant'

export default {
  name: 'SingleOrder',
  props: ['list'],
  methods: {
    // position 为关闭时点击的位置
    // instance 为对应的 SwipeCell 实例
    beforeClose ({ position, instance }) {
      switch (position) {
        case 'left':
        case 'cell':
        case 'outside':
          instance.close()
          break
        case 'right':
          instance.close()
          break
      }
    },
    onToast () { 
      Toast('功能待开发')

    },
    onTip () {
      Toast('已提醒卖家发货')
    },
    onCancel (id) {
      Dialog.confirm({
        message: '确认取消订单吗？'
      }).then(() => {
        this.$emit('onCancel', id)
        this.$store.dispatch('delOrder', id)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.product {
  width: 7.2rem;
  margin: 0.15rem;
  border-radius: 0.1rem;
  overflow: hidden;
  .order {
    padding-top: 4px;
    padding-bottom: 20px;
    margin-bottom: 10px;
    background-color: #fff;
    border-radius: 0.1rem;
  }
  .titletxt {
    padding-right: 0.2rem;
    font-size: 14px;
    color: #666;
  }
  .van-cell__value {
    font-size: 12px;
    color: #ff6600;
  }
  .goods-card {
    margin: 0;
    background-color: white;
  }

  .delete-button {
    height: 100%;
  }
  .van-card {
    margin: 0.1rem 0;
  }
  .txt {
    display: flex;
    justify-content: space-between;
    padding: 20px 5px 0 20px;
    text-align: right;
    font-size: 14px;
    span {
      margin-right: 10px;
      font-size: 14px;
    }
  }
  .btn {
    padding-top: 20px;
    text-align: right;
    button {
      height: 26px;
      padding: 0 10px;
      margin-right: 20px;
      border: 1px solid #666;
      outline: none;
      background-color: #fff;
      border-radius: 15px;
      line-height: 26px;
      text-align: center;
      font-size: 14px;
    }
    .topay {
      border: 1px solid #ff6600;
      color: #ff6600;
    }
  }
  .van-tag {
    margin-right: 0.1rem;
  }
  .delete-button {
    height: 100%;
    border: none;
    background-color: #ff6600;
  }
  .van-multi-ellipsis--l2 {
    width: 200px;
    font-size: 14px;
    font-weight: 700;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
  }
  .van-card__desc {
    padding-bottom: 2px;
  }
}
</style>
